<template>
<div class="info-form">
  <a-row class="info-list">
    <a-col :span="12" v-for="infoitem in infoArr" :key="infoitem.title">
      <div class="info-item">
        <div class="item-top">
          <img :src="infoitem.url" alt="">
          <div class="top-title">{{infoitem.title}}</div>
        </div>
        <div class="item-content">
          <a-descriptions :column="2" :labelStyle="labelStyle" >
            <a-descriptions-item v-for="(child, index) in infoitem.item" :key="index" :label="child.label">{{child.value}}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </a-col>
  </a-row>
</div>
</template>

<script setup>
import {ref} from 'vue'
const url1 = require('../../../../assets/images/LngShippingExecution/RPC20.png')
const url2 = require('../../../../assets/images/LngShippingExecution/RSC20.png')
const url3 = require('../../../../assets/images/LngShippingExecution/SC20.png')
const url4 = require('../../../../assets/images/LngShippingExecution/TPMC20.png')
const url5 = require('../../../../assets/images/LngShippingExecution/SAC20.png')
const infoArr = ref([
  {
    title: '资源采购合同',
    url: url1,
    item: [
        {
          label: '资源方（卖方）',
          value: 'BP'
        },
      {
        label: '卸载港',
        value: '天津'
      },
      {
        label: '预计装载时间',
        value: '2023-12-12 12:32'
      },
      {
        label: '实际卸载时间',
        value: '2023-12-12 12:32'
      },
      {
        label: '贸易主体',
        value: '国贸'
      },
      {
        label: '贸易类型',
        value: '长协'
      },
    ]
  },
  {
    title: '资源销售合同',
    url: url2,
    item: [
      {
        label: '买方',
        value: 'BP'
      },
      {
        label: '卸载港',
        value: '天津'
      },
      {
        label: '预计装载时间',
        value: '2023-12-12 12:32'
      },
      {
        label: '实际卸载时间',
        value: '2023-12-12 12:32'
      },
      {
        label: '贸易主体',
        value: '国贸'
      },
    ]
  },
  {
    title: '船运合同',
    url: url3,
    item: [
      {
        label: '船舶名称',
        value: 'Golar Frost'
      },
      {
        label: 'IMO',
        value: '5536655'
      },
      {
        label: '船运合同类型',
        value: 'Golar-Frost-2020'
      },
      {
        label: '贸易主体',
        value: '国贸'
      },
    ]
  },
  {
    title: '第三方计量合同',
    url: url4,
    item: [
      {
        label: '公司名称',
        value: 'Golar Frost'
      },
      {
        label: '贸易主体',
        value: '国贸'
      },
    ]
  },
  {
    title: '船舶代理合同',
    url: url5,
    item: [
      {
        label: '公司名称',
        value: 'Golar Frost'
      },
      {
        label: '贸易主体',
        value: '国贸'
      },
    ]
  }
])
const labelStyle = ref({
  color: '#6B7A8B'
})
</script>

<style lang="scss" scoped>
.info-form {
  margin-top: 30px;
}
.info-list {
  .info-item {
    width: 600px;
    height: 200px;
    border: 1px solid #dcdee0;
    border-radius: 4px;
    margin: 12px;
    .item-top {
      background: #F5F8FA;
      height: 52px;
      line-height: 52px;
      display: flex;
      padding: 0 15px;
      border-radius: 4px 4px 0 0;
      img {
        width: 22px;
        height: 26px;
        margin-top: 12px;
        margin-right: 10px;
      }
      .top-title {
        color: #2C3749;
        font-size: 16px;
      }
    }
    .item-content {
      padding: 15px;
    }
  }
}
</style>
